import React, { Component } from 'react'
import style from "./list.module.scss";
import header from '../../base/Header';
import {back_icon} from '../../common/icon/svg'
import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
import {request} from "../../serverAPI/index";
import {bookTypeInfoFull} from "../../data/bookType";
let {bookTypeL1,bookTypeL2} = bookTypeInfoFull;
const img = require("../../common/image/me/椭圆 1.png");
const buyIcon =require("../../common/icon_png/buy.png")


function loadingToast() {
    Toast.loading('Loading...', 1, () => {
      console.log('Load complete !!!');
    });
}
export default class List extends Component {
    state={
        list:[],
        active:0,
        currShowType:["",""],
        navLeve1:bookTypeL1,
        indexLeve1:0,
        navLeve2:bookTypeL2,
        indexLeve2:0,
        currShowList:[]
    }
    navClick(leve,ii){
        if(leve == 1){
            this.setState({indexLeve1:ii,indexLeve2:0})
        }else{
            this.setState({indexLeve2:ii})
        }
        this.searchBookByType();
    }

    searchBookByType(){
        setTimeout(()=>{
            let {navLeve1,navLeve2,indexLeve1,indexLeve2} = this.state;

            let typeValue = [navLeve1[indexLeve1],navLeve2[navLeve1[indexLeve1]][indexLeve2]].join()
            request({
                url:"/searchBookByType?typeFilter="+typeValue,
                method:"GET",
            }).then(res=>{
                let {code,data} = res.data;
                if(code=="01") this.setState({currShowList:data});
                // else alert("获取数据失败！")
                else{
                    console.log(res.data)
                } 
            })
        },200)
    }

    componentDidMount(){
        let [navLeve1Str,navLeve2Str] = this.props.location.state;
        let {navLeve1,navLeve2} = this.state;
        let indexLeve1 = navLeve1.findIndex(it=>it ==navLeve1Str);
        let indexLeve2 = navLeve2[navLeve1Str].findIndex(it=>it ==navLeve2Str);
        indexLeve1 = indexLeve1 >= 0 ? indexLeve1 : 0;
        indexLeve2 = indexLeve2 >= 0 ? indexLeve2 : 0;
        this.setState({indexLeve1,indexLeve2});
        this.searchBookByType();

    }

    //去详情页
    goMsg=(bid)=>{
        this.props.history.push("/bookInfoDetails/"+bid)
    }
    
    render() {
        let {navLeve1,navLeve2,indexLeve1,indexLeve2,currShowList} = this.state;
        let navLeve1Item = navLeve1.map((item,index)=>{
            return <span key={index} 
                className={index == indexLeve1 ? `${style["nav-item"]} ${style["nav-active"]}`:style["nav-item"]}
                onClick={()=>{this.navClick(1,index)}}
            >{item}</span>
        });

        let navLeve2Item = navLeve2[navLeve1[indexLeve1]].map((item,index)=>{
            return <span key={index} 
                className={index == indexLeve2 ? `${style["nav-item"]} ${style["nav-active2"]}`:style["nav-item"]}
                onClick={()=>{this.navClick(2,index)}}
            >{item}</span>
        })
        console.log(currShowList);
        
        let bookItems = currShowList.map(book=>{
            return (
                <div key={book.bid} className={style["book-item"]}>
                    <img src={'/apis/'+book.cover}></img>
                    <div className={style["buy-msg"]}>
                        <div className={style["buy-top"]}>
                            <span className={style["buy-name"]}>{book.name}</span>
                             <span className={style["buy-grade"]}>{book.grade}成新</span>
                        </div>
                        <p className={style["msg-description"]}>{book.description}</p>
                        <div className={style["buy-center"]}>
                            <span className={style["buy-city"]}>{book.address.slice(0,2)}</span>
                            <span className={style["buy-succes"]}>自提</span>
                            
                        </div>
                        <div className={style["buy-footer"]}>
                            <div>
                                <span className={style["buy-min"]}>￥</span>
                                <span className={style["buy-new"]}>{book.price}</span>
                                <span className={style["buy-old"]}>￥{book["origin_price"]}</span>
                            </div>
                            <div>
                                {/* <span className={style.relation}>联系卖家</span> */}
                                {/* <span className={style.evaluate}>马上买</span> */}
                                <img src={buyIcon.default} onClick={()=>this.goMsg(book.bid)}></img>
                            </div>
                        </div>
                    </div>
                </div>
            )
        })

        return (
            <div className={style.list}>
                {header({title:"分类详情",history:this.props.history})}

                <div className={style["navbox-l1"]}>
                    <p>{navLeve1Item}</p>
                </div>

                <div className={style["navbox-l2"]}>
                    <p>{navLeve2Item}</p>
                </div>

                <div className={style["book-list"]}>
                    {bookItems.length
                        ? bookItems
                        : <div className={style["list-blank"]}><i>~ 空空如也 ~</i></div>
                    }
                </div>

                {/* <ul className={style.nav}>
                
                    <span className={style.biao} ref={c=>this.biao=c}></span>
                    {
                        
                        this.state.list.map((item,i)=>{
                            return (
                                <li onClick={()=>this.btn(i)} key={i} className={this.state.active===i?style.active:null}>
                                    <Button onClick={loadingToast} className={style["am-button"]}>{item}</Button>
                                </li>
                                
                            )
                        })
                    }
                </ul> */}
                <div className={style.content}>
                    {/* <div className={style.sort}>
                        <div className={style.normal}>
                            默认排序
                        </div>
                        <div className={style["sort-list"]}>
                            <div>
                                <span>价格</span>
                                <div>

                                </div>
                            </div>
                            <div>
                                <span>折扣</span>
                                <div>

                                </div>
                            </div>
                            <div>
                                <span>品相</span>
                                <div>

                                </div>
                            </div>
                            <div>
                                <span>距离</span>
                                <div>
                                    
                                </div>
                            </div>
                        </div>
                    </div> */}
                    {
                        // this.state.list[this.state.active].children.length<=0
                        // ? <div className={style.logo}>
                        //     <img src={img.default}></img>
                        //     <div className={style.kong}>空无一物~</div>
                        //    </div>
                        // :<div className={style.center}>
                        //     {
                        //         this.state.list[this.state.active].children.map((ite,index)=>{
                        //             return (
                        //                 <div key={index} className={style["buy-item"]}>
                        //                     <img src={ite.img.default}></img>
                        //                     <div className={style["buy-msg"]}>
                        //                         <div className={style["buy-top"]}>
                        //                             <span className={style["buy-name"]}>{ite.name}</span>
                        //                             {
                        //                                 ite.ispick? <span className={style["buy-degree"]}>{ite.degree}成新</span>:null
                        //                             }
                        //                         </div>
                        //                         <p>{ite.msg}</p>
                        //                         <div className={style["buy-center"]}>
                        //                             <span className={style["buy-city"]}>{ite.city}</span>
                        //                             <span className={style["buy-succes"]}>自提</span>
                                                    
                        //                         </div>
                        //                         <div className={style["buy-footer"]}>
                        //                             <div>
                        //                                 <span className={style["buy-min"]}>￥</span>
                        //                                 <span className={style["buy-new"]}>{ite.price}</span>
                        //                                 <span className={style["buy-old"]}>￥{ite["original_price"]}</span>
                        //                             </div>
                        //                             <div>
                        //                                 {/* <span className={style.relation}>联系卖家</span> */}
                        //                                 <span className={style.evaluate}>马上买</span>
                        //                             </div>
                        //                         </div>
                        //                     </div>
                        //                 </div>
                        //             )
                        //         })
                        //     }
                        // </div>
                    }
                    </div>
                </div>
        )
    }
}
